// 路由和菜单统一配置文件
import { HomeFilled, User as UserIcon, Tools, Document, DataLine, Setting, Message } from '@element-plus/icons-vue'

// 定义统一的路由菜单配置项
export const routeItems = [
  // 重定向路由（无菜单）
  {
    path: '/',
    redirect: '/login',
    meta: { showInMenu: false }
  },
  // 登录路由（无菜单）
  {
    path: '/login',
    name: 'login',
    component: () => import('../views/LoginView.vue'),
    meta: { showInMenu: false }
  },
  // 首页路由（有菜单）
  {
    path: '/home',
    name: 'home',
    component: () => import('../views/HomeView.vue'),
    meta: { requiresAuth: true, showInMenu: true },
    menu: {
      index: '/home',
      title: '首页',
      icon: HomeFilled,
      type: 'menu'
    }
  },
  // ref页面
  {
    path: '/ref',
    name: 'ref',
    component: () => import('../views/Ref.vue'),
    meta: { requiresAuth: true, showInMenu: true },
    menu: {
      index: '/ref',
      title: 'ref, reactive',  
      icon: UserIcon,
      type: 'menu'
    }
  },
  // toRef页面
  {
    path: '/toref',
    name: 'ToRef',
    component: () => import('../views/ToRef.vue'),
    meta: { requiresAuth: true, showInMenu: true },
    menu: {
      index: '/toref',
      title: 'toRef, toRefs',
      icon: UserIcon,
      type: 'menu'
    }
  },
  // 计算属性页面
  {
    path: '/computed',
    name: 'Computed',
    component: () => import('../views/Computed.vue'),
    meta: { requiresAuth: true, showInMenu: true },
    menu: {
      index: '/computed',
      title: '计算属性',
      icon: UserIcon,
      type: 'menu'
    }
  },
  // 监听属性页面
  {
    path: '/watch',
    name: 'Watch',
    component: () => import('../views/Watch.vue'),
    meta: { requiresAuth: true, showInMenu: true },
    menu: {
      index: '/watch',
      title: '监听属性',
      icon: UserIcon,
      type: 'menu'
    }
  },
  // Vue周期函数页面
  {
    path: '/vuepage',
    name: 'VuePage',
    component: () => import('../views/VuePage.vue'),
    meta: { requiresAuth: true, showInMenu: true },
    menu: {
      index: '/vuepage',
      title: 'Vue周期函数',
      icon: UserIcon,
      type: 'menu'
    }
  },
  {
      path: '/router',
      name: 'Router',
      component: () => import('../views/Router.vue'),
      meta: { requiresAuth: true, showInMenu: true },
      menu: {
        index: '/router',
        title: '路由',
        icon: UserIcon,
        type: 'menu'
      }
  },
  // Pina页面
  {
    path: '/pina',
    name: 'Pina',
    component: () => import('../views/Pina.vue'),
    meta: { requiresAuth: true, showInMenu: true },
    menu: {
      index: '/pina',
      title: 'Pina',
      icon: UserIcon,
      type: 'menu'
    }
  },
  // Component页面
  {
    path: '/component',
    name: 'Component',
    component: () => import('../views/Component.vue'),
    meta: { requiresAuth: true, showInMenu: true },
    menu: {
      index: '/component',
      title: '组件',
      icon: UserIcon,
      type: 'menu'
    }
  },
  // Slots插槽
  {
    path: '/slots',
    name: 'Slots',
    component: () => import('../views/Slots.vue'),
    meta: { requiresAuth: true, showInMenu: true },
    menu: {
      index: '/slots',
      title: '插槽',
      icon: UserIcon,
      type: 'menu'
    }
  },
  // 高级管理子菜单组
  {
    meta: { showInMenu: true },
    menu: {
      index: 'management',
      title: '高级管理',
      icon: Tools,
      type: 'submenu',
      children: [
        // 订单管理
        {
          path: '/orders',
          name: 'orders',
          component: () => import('../views/PlaceholderView.vue'),
          meta: { requiresAuth: true, showInMenu: true },
          menu: {
            index: '/orders',
            title: '订单管理',
            type: 'menu'
          }
        },
        // 数据统计
        {
          path: '/statistics',
          name: 'statistics',
          component: () => import('../views/PlaceholderView.vue'),
          meta: { requiresAuth: true, showInMenu: true },
          menu: {
            index: '/statistics',
            title: '数据统计',
            type: 'menu'
          }
        },
        // 系统设置
        {
          path: '/settings',
          name: 'settings',
          component: () => import('../views/PlaceholderView.vue'),
          meta: { requiresAuth: true, showInMenu: true },
          menu: {
            index: '/settings',
            title: '系统设置',
            type: 'menu'
          }
        },
        // 帮助中心
        {
          path: '/help',
          name: 'help',
          component: () => import('../views/PlaceholderView.vue'),
          meta: { requiresAuth: true, showInMenu: true },
          menu: {
            index: '/help',
            title: '帮助中心',
            type: 'menu'
          }
        }
      ]
    }
  },
  // 产品管理子菜单组
  // {
  //   meta: { showInMenu: true },
  //   menu: {
  //     index: 'products',
  //     title: '产品管理',
  //     icon: Tools,
  //     type: 'submenu',
  //     showTitle: true,
  //     children: [
  //       // 产品列表（占位）
  //       {
  //         path: '/products',
  //         name: 'product-list',
  //         component: () => import('../views/PlaceholderView.vue'),
  //         meta: { requiresAuth: true, showInMenu: true },
  //         menu: {
  //           index: 'product-list',
  //           title: '产品列表',
  //           type: 'menu'
  //         }
  //       },
  //       // 添加产品（占位）
  //       {
  //         path: '/products/add',
  //         name: 'product-add',
  //         component: () => import('../views/PlaceholderView.vue'),
  //         meta: { requiresAuth: true, showInMenu: true },
  //         menu: {
  //           index: 'product-add',
  //           title: '添加产品',
  //           type: 'menu'
  //         }
  //       },
  //       // 分类管理（占位）
  //       {
  //         path: '/categories',
  //         name: 'categories',
  //         component: () => import('../views/PlaceholderView.vue'),
  //         meta: { requiresAuth: true, showInMenu: true },
  //         menu: {
  //           index: 'categories',
  //           title: '分类管理',
  //           type: 'menu'
  //         }
  //       }
  //     ]
  //   }
  // },
  // 订单管理（占位）
  // {
  //   path: '/orders',
  //   name: 'orders',
  //   component: () => import('../views/PlaceholderView.vue'),
  //   meta: { requiresAuth: true, showInMenu: true },
  //   menu: {
  //     index: 'orders',
  //     title: '订单管理',
  //     icon: Document,
  //     type: 'menu',
  //     showTitle: true
  //   }
  // },
  // 数据统计（占位）
  // {
  //   path: '/statistics',
  //   name: 'statistics',
  //   component: () => import('../views/PlaceholderView.vue'),
  //   meta: { requiresAuth: true, showInMenu: true },
  //   menu: {
  //     index: 'statistics',
  //     title: '数据统计',
  //     icon: DataLine,
  //     type: 'menu',
  //     showTitle: true
  //   }
  // },
  // 系统设置（占位）
  // {
  //   path: '/settings',
  //   name: 'settings',
  //   component: () => import('../views/PlaceholderView.vue'),
  //   meta: { requiresAuth: true, showInMenu: true },
  //   menu: {
  //     index: 'settings',
  //     title: '系统设置',
  //     icon: Setting,
  //     type: 'menu',
  //     showTitle: true
  //   }
  // },
  // 帮助中心（占位）
  // {
  //   path: '/help',
  //   name: 'help',
  //   component: () => import('../views/PlaceholderView.vue'),
  //   meta: { requiresAuth: true, showInMenu: true },
  //   menu: {
  //     index: 'help',
  //     title: '帮助中心',
  //     icon: Message,
  //     type: 'menu',
  //     showTitle: true
  //   }
  // }
]

// 从routeItems中提取路由配置
export function extractRoutes() {
  const routes = []
  
  routeItems.forEach(item => {
    // 如果是完整路由配置（有path属性），添加到routes
    if (item.path) {
      const route = {
        path: item.path,
        name: item.name,
        component: item.component,
        meta: item.meta,
        redirect: item.redirect
      }
      routes.push(route)
      console.log('添加路由:', route)
    }
  })
  
  console.log('总路由数量:', routes.length)
  console.log('路由列表:', routes)
  return routes
}

// 从routeItems中提取菜单配置
export function extractMenuItems() {
  const menuItems = []
  
  routeItems.forEach(item => {
    // 只处理需要在菜单中显示的项
    if (item.meta?.showInMenu && item.menu) {
      const menuItem = { 
        ...item.menu,
        route: item.path, // 为菜单项添加路由路径
        children: [] // 为所有菜单项初始化children数组
      }
      
      // 如果有子菜单配置，直接复制children
      if (item.menu.children && item.menu.children.length > 0) {
        menuItem.children = item.menu.children.map(child => ({
          menu: child.menu,
          path: child.path
        }))
      }
      
      menuItems.push(menuItem)
      console.log('添加菜单项:', menuItem.index, menuItem.title)
    }
  })
  
  console.log('总菜单项数量:', menuItems.length)
  console.log('菜单项列表:', menuItems)
  return menuItems
}

// 生成菜单标题映射
export function generateMenuTitles() {
  const titles = {}
  
  function collectTitles(items) {
    items.forEach(item => {
      // 处理普通菜单项
      if (item.menu?.index && item.menu?.title) {
        titles[item.menu.index] = item.menu.title
        // 同时添加不带斜杠的版本（用于兼容）
        if (item.menu.index.startsWith('/')) {
          titles[item.menu.index.substring(1)] = item.menu.title
        }
      }
      
      // 处理子菜单中的路由
      if (item.menu?.children) {
        item.menu.children.forEach(child => {
          if (child.menu?.index && child.menu?.title) {
            titles[child.menu.index] = child.menu.title
            // 同时添加不带斜杠的版本
            if (child.menu.index.startsWith('/')) {
              titles[child.menu.index.substring(1)] = child.menu.title
            }
          }
        })
        collectTitles(item.menu.children)
      }
    })
  }
  
  collectTitles(routeItems)
  return titles
}

// 导出提取的菜单配置和标题映射
export const menuItems = extractMenuItems()
export const menuTitles = generateMenuTitles()